<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
			body,html{
				padding: 0;
				margin: 0;
				background:#0A0F23;
				width: 100%;
				height: 100%;
			}
		</style>
<body >
	<div id="pieChart" style="width: 100%;height:100%;"></div>
<script src="../../components/echarts-4.0.4.min.js"></script>
<script src="../../components/jquery-1.11.0.min.js"></script>
<script src="../../js/common/utils.js"></script>
<script>
    var pieChart = echarts.init(document.getElementById('pieChart'));
  //  var pieOption = {
   // 	color:['#fa4a03','#e14304',"#cd3d03","#b93704","#a53103","#a34018"],
    	
	    /*title : {
	        text: '南丁格尔玫瑰图',
	        subtext: '纯属虚构',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        x : 'center',
	        y : 'bottom',
	        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {
	                show: true,
	                type: ['pie', 'funnel']
	            },
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    series : [
	      
	        {
	            name:'面积模式',
	            type:'pie',
	            radius : [40, 83],
	            center : ['50%', '50%'],
	            roseType : 'area',
	            data:[
	                {value:107, name:'东部地区'},
	                {value:1216, name:'西部地区'},
	                {value:873, name:'南部地区'},
	                {value:333, name:'北部地区'},
	                {value:453, name:'东北地区'},
	                {value:2141, name:'中部地区'}
	        	]
			}
		]*/
		
	var	data=[
	                {value:132, name:'东部地区'},
	                {value:170, name:'西部地区'},
	                {value:35, name:'南部地区'},
	                {value:33, name:'北部地区'},
	                {value:12, name:'东北地区'},
	                {value:88, name:'中部地区'}
	        	]
		pieOption = {
		    /*backgroundColor: '#1d2239',*/
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293'],
		    legend: { //图例组件，颜色和名字
		        left: '120px',
		        top: '25px',
		        orient: 'vertical',
		        itemGap: 12, //图例每项之间的间隔
		        itemWidth: 10,
		        itemHeight: 10,
		        icon: 'rect',
		        data: ['东部地区', '西部地区', '南部地区', '北部地区', '东北地区','中部地区'],
		        textStyle: {
		            color: [],
		            fontStyle: 'normal',
		            fontFamily: '微软雅黑',
		            fontSize: 16,
		            color: '#fff'
		        }
		    },
		    series: [{
		        name: '违规次数',
		        type: 'pie',
		        clockwise: false, //饼图的扇区是否是顺时针排布
		        minAngle: 20, //最小的扇区角度（0 ~ 360）
		        center: ['50%', '50%'], //饼图的中心（圆心）坐标
		        radius: [85, 120], //饼图的半径
		        avoidLabelOverlap: true, ////是否启用防止标签重叠
		        itemStyle: { //图形样式
		            normal: {
		                borderColor: '#1e2239',
		                borderWidth: 1.5,
		            },
		        },
		        label: { //标签的位置
		            normal: {
		                show: true,
		                position: 'inside', //标签的位置
		                formatter: "{c}",
		                textStyle: {
		                    color: '#fff',
		                }
		            },
		            emphasis: {
		                show: true,
		                textStyle: {
		                    fontWeight: 'bold'
		                }
		            }
		        },
		        data: data
		    }, {
		        name: '',
		        type: 'pie',
		        clockwise: false,
		        silent: true,
		        minAngle: 20, //最小的扇区角度（0 ~ 360）
		        center: ['50%', '50%'], //饼图的中心（圆心）坐标
		        radius: [40, 85], //饼图的半径
		        itemStyle: { //图形样式
		            normal: {
		                borderColor: '#1e2239',
		                borderWidth: 1.5,
		                opacity: 0.21,
		            }
		        },
		        label: { //标签的位置
		            normal: {
		                show: false,
		            }
		        },
		        data: data
		    }]
		};
    
    var currentIndex = -1;

    var timer1 = setInterval(function () {
        var dataLen = pieOption.series[0].data.length;
        // 取消之前高亮的图形
        pieChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
        });

        currentIndex = (currentIndex + 1) % dataLen;

        // 高亮当前图形
        pieChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: currentIndex
        });

    }, 1000);

   
   
	
    pieChart.setOption(pieOption);
</script>
</body>
</html>